<template>
	<view class="page tn-safe-area-inset-bottom">
		<view class="top-bg"></view>

		<view class="page-container">
			<view v-if="articleBanner.length > 0" class="tn-margin-bottom-sm">
				<!-- banner -->
				<tn-swiper :list="articleBanner" name="coverImg" :height="300" :effect3d="false" mode="rect"
					:radius="15" @click="bannerClick"></tn-swiper>
			</view>

			<!-- 顶部标签 -->
			<view style="width: 100%;position: relative;">
				<view class="tn-bg-white dawn-radius dawn-shadow">
					<tn-tabs-swiper activeColor="#3165CC" inactiveColor="#080808" :list="navList" :current="tabsIndex"
						@change="tabsChange"></tn-tabs-swiper>
				</view>
			</view>

			<view class="">
				<block v-for="(item, index) in articleList" :key="index">
					<view @click="newsDteail(item)"
						class="tn-bg-white dawn-shadow dawn-radius tn-margin-top-sm dawn-radius">
						<view class="tn-flex tn-padding-sm">
							<view v-if="item.coverImg" class="news-image-box "
								:style="'background-image:url(' + item.coverImg + ')'">
								<view class="news-image-pic"></view>
							</view>
							<view class="tn-padding-left-xs tn-padding-top-xs" style="width: 100%;">
								<view class="tn-text-lg tn-text-bold news-title">
									{{ item.title }}
								</view>
								<view class="tn-padding-top-xs" v-if="item.description">
									<text class=" tn-text-sm tn-color-gray news-desc">
										{{ item.description }}
									</text>
								</view>
								<view class="tn-flex tn-flex-row-right tn-flex-col-between tn-padding-top-xs">
									<!-- <view v-for="(label_item,label_index) in item.tagsArray" :key="label_index"
							class="justify-content-item tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold"
							:class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
							<text class="tn-tag-content__item--prefix">#</text> {{ label_item }}
						</view> -->
									<view class="justify-content-item tn-color-gray tn-text-center tn-color-gray"
										style="padding-top: 5rpx;">
										<text class="tn-icon-footprint tn-padding-right-xs"></text>
										<text class="tn-padding-right">{{ item.views }}</text>
										<text class="tn-icon-time-fill tn-padding-right-xs"></text>
										<text class="">{{ formatDate(item.createTime) }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>

		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<view v-if="show">
			<dawnMsg :msg="msg"></dawnMsg>
		</view>
		<!-- 底部tabbar start-->
		<tn-tabbar v-model="currentIndex" :list="tabbarList" :animation="true" :safeAreaInsetBottom="true"
			activeIconColor="#aaaaaa" @change="switchTabbar">
		</tn-tabbar>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import * as ArticleApi from '@/api/cms/article.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import * as Util from '@/utils/util.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		data() {
			return {
				loading: false,
				show: false,
				msg: '',
				currentIndex: 1,
				tabbarList: app.globalData.tabbarList,
				tabsIndex: 0,
				navList: [], // 文章分类
				active: 0, // 选中的分类编号，0 为热门
				articleBanner: [], // Banner 文章
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				articleList: [], // 普通文章
				page: 1,
				limit: 8,
				status: false,
				scrollLeft: 0,
				queryData: {
					pageSize: 10,
					pageNo: 1,
					categoryId: 0
				},
			}
		},
		created() {
			this.tabbarList = app.globalData.tabbarList;
		},
		onLoad(options) {
			this.tabsIndex = options.tabsIndex ? Number.parseInt(options.tabsIndex) : 0;
			this.active = this.tabsIndex;
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.currentIndex = 1;
			this.getArticleCate();
			this.getArticleBanner();
			// if (this.active === 0) {
			// 	this.getArticleHot();
			// } else {
			// 	this.$set(this, 'articleList', []);
			// 	this.page = 1;
			// 	this.status = false;
			// 	this.getCidArticle();
			// }
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getCidArticle();
		},
		methods: {
			bannerClick(index) {
				console.table(index);
				newsDteail(this.articleBanner[index]);
			},
			/**
			 * 获得分类
			 */
			getArticleCate: function() {
				ArticleApi.getArticleCategoryList().then(res => {
					let list = res.data;
					// list.unshift({
					// 	id: 0,
					// 	name: '热门'
					// });
					this.$set(this, 'navList', list);
					if (list.length > 0) {
						this.page = 1;
						this.status = false;
						this.getCidArticle();
					}
				});
			},
			/**
			 * 获得热门文章
			 */
			getArticleHot: function() {
				this.loading = true;
				this.show = false;
				this.$set(this, 'articleList', []);
				ArticleApi.getArticleList({
					recommendHot: true
				}).then(res => {
					this.loading = false;
					if (res.code === 0) {
						const l = res.data.list || [];
						this.$set(this, 'articleList', l);
						if (l.length == 0) {
							this.show = true;
							this.msg = '暂无数据';
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				});
			},
			/**
			 * 获得 Banner 文章
			 */
			getArticleBanner: function() {
				ArticleApi.getArticleList({
					recommendBanner: true
				}).then(res => {
					if (res.data && res.data.list.length > 5) {
						const list = res.data.list.slice(0, 5);
						this.articleBanner = list;
					} else {
						this.articleBanner = res.data.list;
					}
				});
			},
			/**
			 * 获得指定分类的文章列表
			 */
			getCidArticle: function() {
				console.info("this.active:" + this.active);
				// console.info("this.status:" + this.status);
				if (this.active === 0) {
					this.active = this.navList[0].id;
				}
				if (this.status) {
					return;
				}
				this.loading = true;
				this.show = false;
				this.$set(this, 'articleList', []);
				ArticleApi.getArticlePage({
					categoryId: this.active,
					publish: 0,
					pageNo: this.page,
					pageSize: this.limit
				}).then(res => {
					this.loading = false;
					if (res.code === 0) {
						const l = res.data.list || [];
						this.$set(this, 'articleList', l);
						// let articleListNew = this.articleList.concat(l);
						// this.page++;
						// this.status = this.limit > l.length;
						if (l.length == 0) {
							this.show = true;
							this.msg = '暂无数据';
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
					console.table(res);

				});
			},
			/**
			 * 分类切换，重新加载文章列表
			 */
			tabsChange(index) {
				this.tabsIndex = index;
				this.active = index;
				this.active = this.navList[index].id;
				if (this.active === 0) {
					this.getArticleHot();
				} else {
					this.$set(this, 'articleList', []);
					this.page = 1;
					this.status = false;
					this.getCidArticle();
				}
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		&--wrap {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
		}

		/* 导航栏 start */
		&__tabs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: inherit;
		}

		/* 导航栏 end */

		/* swiper start */
		&__swiper {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
			// padding: 0 16rpx;
		}

		/* swiper end */

		/* 订单内容 start */
		&__item {
			margin: 20rpx;
			padding: 36rpx 26rpx;
			background-color: #FFFFFF;
			border-radius: 18rpx;

			&:first-child {
				margin-top: 40rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}

			/* 头部 start */
			&__head {

				&__title {
					font-weight: bold;
					line-height: normal;

					&--right-icon {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}

				&__status {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}

			/* 头部 end */

			/* 内容 start */
			&__content {

				margin-top: 20rpx;

				&__image {
					margin-right: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}

				&__title {
					padding-right: 40rpx;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&__info {

					&__price {
						&--unit {
							font-size: 20rpx;
						}

						&__value--integer,
						&__value--decimal {
							font-weight: bold;
						}

						&__value--decimal {
							font-size: 20rpx;
						}
					}

					&__count {
						color: #AAAAAA;
						font-size: 24rpx;
					}
				}
			}

			/* 内容 end */

			/* 操作按钮 start */
			&__primaryeration {
				margin-top: 30rpx;

				&__right {
					&__button {
						margin-left: 10rpx;
					}
				}
			}

			/* 操作按钮 end */
		}

		/* 订单内容 end */
	}
</style>